<template>
  <el-page-header title="返回" @back="goBack">
    <template #content>
      {{ username }}个人信息
    </template>
  </el-page-header>
  <br><br>
  <div class="form">
    <el-form :model="userInfo" label-width="120px">
      <el-form-item label="用户名">
        <el-input v-model="userInfo.username"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input disabled v-model="userInfo.password"></el-input>
      </el-form-item>
      <el-form-item label="手机号">
        <el-input v-model="userInfo.telNumber"></el-input>
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input v-model="userInfo.email"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="formSubmit">提交</el-button>
        <el-button type="success" @click="isChangePassword = true">修改密码</el-button>
      </el-form-item>
    </el-form>
  </div>

  <!--修改密码弹出框-->
  <el-dialog v-model="isChangePassword" title="修改密码" @closed="clearPassword" destroy-on-close>
    <el-form :model="password" label-width="120px" :rules="rules" ref="passwordForm">
      <el-form-item label="旧密码" required prop="oldPassword">
        <el-input type="password" show-password v-model="password.oldPassword"></el-input>
      </el-form-item>
      <el-form-item label="新密码" prop="newPassword">
        <el-input type="password" show-password v-model="password.newPassword"></el-input>
      </el-form-item>
      <el-form-item label="重复新密码" required prop="repeat">
        <el-input type="password" show-password v-model="password.repeat"></el-input>
      </el-form-item>
      <el-form-item>
        <el-image
            style="width: 200px; height: 100px"
            :src="captchaUrl"
        ></el-image>
      </el-form-item>
      <el-form-item label="验证码" prop="code">
        <el-input v-model="password.code"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="updatePassword">提交</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import useUserinfo from '../hooks/UserInfoHook'
import useHeaderHook from '../hooks/HeaderHook'

export default {
  name: "UserInfo",
  setup() {
    return {
      ...useUserinfo(),
      username: useHeaderHook().username
    }
  },
}
</script>

<style scoped>
.form {
  width: 60%;
}
</style>
